/*----------------------------------------*\
  TABLE
\*----------------------------------------*/

.table-wrapper {
  @apply overflow-x-auto;

  .container__center--xs &,
  .container__center--sm & {
    @apply broader-than-container;
  }

  .container__center--md &,
  .container__full & {
    @apply broader-than-container-centered;
  }

  caption {
    white-space: pre-line;
  }
}

table,
.table {
  @apply w-full;
  @apply border border-text-200;
  @apply shadow-md;
}

caption {
  @apply hidden legend;
  caption-side: bottom;

  .table--caption & {
    @apply table-caption text-left;
  }
}

thead {
  @apply bg-secondary-50;

  th {
    @apply px-6 py-4;
    @apply text-left;
    @apply text-text-700 uppercase text--sm;
    @apply align-top;
  }
}

tbody,
tfoot {
  tr {
    @apply border-t border-text-300;
  }

  td,
  th {
    @apply px-6 py-4;
    @apply text--base;
    @apply text-gray-600;
  }

  th {
    @apply text-gray-800 font-bold text-left;
  }
}

tfoot {
  @apply border-y-2 border-text-300;
}

.table--compact {
  @apply border-0;
  @apply shadow-none;

  thead {
    th {
      @apply px-2 py-2;
    }
  }

  tbody,
  tfoot {
    td,
    th {
      @apply px-2 py-2;
      @apply text--sm;
    }
  }
}

.table--bare {
  @apply shadow-none border-0;

  tr {
    @apply border-0 px-0 py-0;
  }

  td,
  th {
    @apply p-0 text--base font-regular;
  }
}

.table--zebra {
  tbody,
  tfoot {
    tr:nth-child(even) {
      @apply bg-secondary-50;
    }
  }
}

.table__sorter {
  @apply inline-flex items-baseline text-left hover:text-red-600;
  text-transform: inherit;
  font-weight: inherit;

  .text-right & {
    @apply justify-end;
    text-align: right;
  }
}

.table__sorter {
  span::after {
    content: '↕';
    @apply block ml-1 min-w-[1.25em];
    @apply font-normal text--xs text-center;
  }

  th[aria-sort='descending'] & span::after {
    content: '▼';
  }

  th[aria-sort='ascending'] & span::after {
    content: '▲';
  }
}
